<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>KindEditor</title>
		<style>
			textarea {
				display: block;
			}
			.ke-icon-remote_image {
				background-image: url(./../skins/default/default.gif);
				background-position: 0px -496px;
				width: 16px;
				height: 16px;
			}
		</style>
		<script charset="utf-8" src="../kindeditor.js"></script>
		<script>
			KE.lang['remote_image'] = "插入远程图片";
			KE.plugin['remote_image'] = {
				click : function(id) {
					KE.util.selection(id);
					var dialog = new KE.dialog({
						id : id,
						cmd : 'remote_image',
						file : '../examples/remote_image.html',
						width : 310,
						height : 90,
						title : KE.lang['image'],
						yesButton : KE.lang['yes'],
						noButton : KE.lang['no']
					});
					dialog.show();
				},
				check : function(id) {
					var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
					var url = KE.$('url', dialogDoc).value;
					var title = KE.$('imgTitle', dialogDoc).value;
					var width = KE.$('imgWidth', dialogDoc).value;
					var height = KE.$('imgHeight', dialogDoc).value;
					var border = KE.$('imgBorder', dialogDoc).value;
					if (url.match(/\.(jpg|jpeg|gif|bmp|png)$/i) == null) {
						alert(KE.lang['invalidImg']);
						window.focus();
						KE.g[id].yesButton.focus();
						return false;
					}
					if (width.match(/^\d+$/) == null) {
						alert(KE.lang['invalidWidth']);
						window.focus();
						KE.g[id].yesButton.focus();
						return false;
					}
					if (height.match(/^\d+$/) == null) {
						alert(KE.lang['invalidHeight']);
						window.focus();
						KE.g[id].yesButton.focus();
						return false;
					}
					if (border.match(/^\d+$/) == null) {
						alert(KE.lang['invalidBorder']);
						window.focus();
						KE.g[id].yesButton.focus();
						return false;
					}
					return true;
				},
				exec : function(id) {
					KE.util.select(id);
					var iframeDoc = KE.g[id].iframeDoc;
					var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
					if (!this.check(id)) return false;
					var url = KE.$('url', dialogDoc).value;
					var title = KE.$('imgTitle', dialogDoc).value;
					var width = KE.$('imgWidth', dialogDoc).value;
					var height = KE.$('imgHeight', dialogDoc).value;
					var border = KE.$('imgBorder', dialogDoc).value;
					this.insert(id, url, title, width, height, border);
				},
				insert : function(id, url, title, width, height, border) {
					var html = '<img src="' + url + '" ';
					if (width > 0) html += 'width="' + width + '" ';
					if (height > 0) html += 'height="' + height + '" ';
					if (title) html += 'title="' + title + '" ';
					html += 'alt="' + title + '" ';
					html += 'border="' + border + '" />';
					KE.util.insertHtml(id, html);
					KE.layout.hide(id);
					KE.util.focus(id);
				}
			};
			KE.show({
				id : 'content1',
				cssPath : './index.css',
				items : ['source', 'remote_image', 'about']
			});
		</script>
	</head>
	<body>
		<h3>自定义插件 - 插入远程图片</h3>
		<textarea id="content1" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea>
	</body>
</html>
